<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <script src="../lib/js/jquery-1.10.1.min.js"></script>
    <script src="../lib/swiper/js/swiper.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../ajax/request.js"></script>
    <script src="../utils/cookie.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../styles/css/index.css">

    
    <!-- 自己的样式  -->

    <link rel="stylesheet" href="../styles/css/register.css">
</head>
<body>
    <div class="register">
        <form class="form layui-form layui-form-pane register-form" >
            <h3 class="title">千锋在线商城</h3>
            <p class="text" >立即注册</p>
            <div class="form-box">
                <div class="layui-form-item inputitem">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-inline">
                      <input type="text" id="user" name="user" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？"   placeholder="请输入用户名"  autocomplete="off" class="layui-input">
                    </div>
                    <div class="err-tips usertip"></div>
                </div>
                <div class="layui-form-item inputitem">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-inline">
                      <input type="text" id="phone" name="phone" lay-verify="required" lay-reqtext="手机号码是必填项，岂能为空？"   placeholder="请输入手机号"  autocomplete="off" class="layui-input">
                    </div>
                    <div class="err-tips phonetip"></div>
                </div>
                <div class="layui-form-item inputitem">
                    <label class="layui-form-label">联系邮箱</label>
                    <div class="layui-input-inline">
                      <input type="text" id="email" name="email" lay-verify="required" lay-reqtext="联系邮箱是必填项，岂能为空？"   placeholder="请输入邮箱"  autocomplete="off" class="layui-input">
                    </div>
                    <div class="err-tips emailtip"></div>
                </div>
                <div class="layui-form-item inputitem">
                    <label class="layui-form-label">登录密码</label>
                    <div class="layui-input-inline">
                      <input type="password" id="pass" name="pass" lay-verify="required|pass" lay-reqtext="请填写6到12位密码" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item inputitem">
                    <button type="button"  lay-submit="" lay-filter="demo1" class="zhucebtn layui-btn layui-btn-normal layui-btn-fluid">注册</button>
                </div>

                <div class="linkitem inputitem" style="margin-top:5px">
                    <a class="link " href="./login.html">已有账号,前往登录</a>
                    <a class="link pass" href="./forgetpass.html">忘记密码</a>
                </div>
            </div>
        </form>
    </div>

    <script>

        $(function(){

            // 检查user 
            $("#user").blur(function(){
                checkIsUser()
            })
            async function checkIsUser(){
                const res = await isUser_ajax({
                    user:$("#user").val()
                })
                const {status,detail} = res;
                if(status){
                    $(".usertip").html(detail+" √").css({color:'green'})
                }else{
                    $(".usertip").html(detail).css({color:'red'})
                }
            }

            // 检查phone
            $("#phone").blur(function(){
                checkIsPhone()
            })
            async function checkIsPhone(){
                const res = await isPhone_ajax({
                    phone:$("#phone").val()
                })
                const {status,detail} = res;
                if(status){
                    $(".phonetip").html(detail+" √").css({color:'green'})
                }else{
                    $(".phonetip").html(detail).css({color:'red'})
                }
            }

             // 检查Email
             $("#email").blur(function(){
                checkIsemail()
            })
            async function checkIsemail(){
                const res = await isEmail_ajax({
                    email:$("#email").val() 
                })
                const {status,detail} = res;
                if(status){
                    $(".emailtip").html(detail+" √").css({color:'green'})
                }else{
                    $(".emailtip").html(detail).css({color:'red'})
                }
            }



            $(".zhucebtn").on("click",function(){
                registeraction();
            })

           async function registeraction(){
               var user = $("#user").val()
               var phone = $("#phone").val()
               var email = $("#email").val()
               var pass = $("#pass").val()
               if(user&&phone&&email&&pass){
                   let res = await register_ajax({
                        user,
                        phone,
                        email,
                        pass
                   })
                   const {status,detail} = res;
                   if(status){
                        location.href = "./login.html?user="+user;
                   }else{

                   }
                   layer.msg(detail);
               }

           }

            $(window).keydown(function(event){
                var event =  event || window.event;
                if(event.keyCode==13){
                    registeraction()
                }
            });

        })

    </script>
</body>
</html>